<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
        * {
            margin: 0;
            padding: 0;
        }

        @keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-webkit-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-moz-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        .wrap {
            width: 1000px;
            text-align: center;
            margin: 100px auto 0;
        }

        .wrap h1 {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight: 300;
        }

        .word {
            font-weight: 700;
        }

        .typed-cursor {
            opacity: 1;
            -webkit-animation: blink .7s infinite;
            -moz-animation: blink .7s infinite;
            animation: blink .7s infinite;
            display: none;
        }

        .saySection {
            margin-top: 50px;
        }

        .saySection input {
            font-size: 30px;
        }

        .saySection .txtSay {
            padding-left: 10px;
        }

        .saySection .btnSay {
            display: inline-block;
            padding: 0 20px;
            cursor: pointer;
        }
    </style>
	</head>
	<body>
		<div class="wrap">
        <h1>
            You want to say ： <span class="word"></span><span class="typed-cursor">|</span> ！
        </h1>

        <div class="saySection">
            <input type="text" id="inValue" class="txtSay"/>
            <input type="button" value="Say" id="btnSay" class="btnSay"/>
        </div>
    </div>
    
	</body>
	<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
	<script>
    	var str="红鲤鱼与绿鲤鱼与驴"
    	var strArr = str.split("")
    	var str2 = ""
    	var num=0;
    	var n=0;
    	
    	
    	var timer = setInterval(function(){
    		str2+=strArr[num]
    		num++;
    		$(".word").text(str2);
    		if(num==strArr.length){
    			clearInterval(timer);
    		}
    	},300)
    	 //作业 需求2：点击say按钮，上面的input中的内容，每隔固定时间，.word中添加一个字符，插入的就是input中的内容。
    	
    	$("#btnSay").click(function(){
    		var inputSay = $("#inValue").val()
    		var timer2 = setInterval(function(){
    			if(n>200){
    				clearInterval(timer2)
    			}
    			console.log(inputSay)
    			str2+=inputSay;
    			n++;
    			$(".word").text(str2);
    			
    			
    		},200)
    		
    	})
    	
  
    </script>

</html>
